Figma Code Connect https://www.figma.com/code-connect-docs/ is a way to connect figma components to implementation documentation to make hand offs more intuitive.

Essentially it is a cli tool that allows you to create mapping files within our design-system implementation that map react properties to figma properties and then publishes this metadata to figma sheets.

This will then show on figma side when a user clicks on a component instance they can see how it should be implemented.

ie: Within a handoff a user clicks on a Button instance they would see the connected component snippet.

import { Button } from '@0xsequence/design-system'

<Button variant="primary" label="Confirm" />

Meaning the user immediately knows if there is an existing component within the design system they can use, along with the exact props and values.